// 类组件
// import React,{Component} from 'react';

// 函数组件
import React from 'react';
import styles from './uc-button.module.css';
import propTypes from 'prop-types';

/*
*
*  type:   default circ     string        defualt
*
*  onClick: 要执行的业务     function      点击 (ev)=>{}
*
*  style:  行间样式          object        {css属性}
*
*  disabled: 禁用           boolean       false
*
*  size:  large small       string        default
*
*  children:  字内容         sting         按钮
*
*  circ:      正圆          string         default
*
* */


// 类组件
// export default class UcButton extends Component{
//   static defaultProps = {
//     size: 'default',
//     disabled: false,
//     style: {},
//     onClick: () => undefined,
//     type: 'default',
//     circ: 'default'
//   };
//   static propTypes = {
//     children: propTypes.string,
//     size: propTypes.string,
//     disabled: propTypes.bool,
//     style: propTypes.object,
//     onClick: propTypes.func,
//     type: propTypes.string
//   };

//   render(){

//     let {children, style, onClick,disabled, type,  size} = this.props;

//     return (
//       <button
//         // className={`uc-button-type uc-button-type--size`}
//         // className={`uc-button-circ uc-button-circ--large`}
//         className={`${styles[`uc-button-${type}` ]} ${styles[`uc-button-${type}--${size}`]}`}
//         style={style}
//         disabled={disabled}
//         onClick={onClick}
//       >

//         {children ? children : '按 钮'}

//       </button>
//     )
//   }
// }


// 函数组件
const UcButton = props => {
  let {children, style, onClick,disabled, type,  size} = props;

  return (
    <button
      // className={`uc-button-type uc-button-type--size`}
      // className={`uc-button-circ uc-button-circ--large`}
      className={`${styles[`uc-button-${type}` ]} ${styles[`uc-button-${type}--${size}`]}`}
      style={style}
      disabled={disabled}
      onClick={onClick}
    >
      {children ? children : '按 钮'}
    </button>
  )
}
// 默认属性作为函数的属性
UcButton.defaultProps={
  size: 'default',
  disabled: false,
  style: {},
  onClick: () => undefined,
  type: 'default',
  circ: 'default'
}

// 属性约定作为函数的属性
UcButton.propTypes={
  children: propTypes.string,
  size: propTypes.string,
  disabled: propTypes.bool,
  style: propTypes.object,
  onClick: propTypes.func,
  type: propTypes.string
}
export default UcButton;